<template>
  <el-input
    ref="input"
    v-model.trim="val"
    :type="attrs.type || 'text'"
    :maxlength="attrs.maxLength || 20"
    :minlength="attrs.minLength"
    :show-word-limit="attrs.showWordLimit || true"
    :clearable="attrs.clearable || true"
    :showPassword="attrs.showPassword || false"
    :disabled="attrs.disabled || false"
    :size="attrs.size || null"
    :prefixIcon="attrs.prefixIcon || null"
    :suffixIcon="attrs.suffixIcon || null"
    :rows="attrs.rows || 2"
    :autosize="attrs.autosize || false"
    :autocomplete="attrs.autocomplete || 'off'"
    :name="attrs.name || null"
    :readonly="attrs.readonly || false"
    :max="attrs.max"
    :title="val"
    :min="attrs.min"
    :step="attrs.step || null"
    :resize="attrs.resize || null"
    :autofocus="attrs.autofocus || false"
    :form="attrs.form || null"
    :label="attrs.label || null"
    :tabindex="attrs.tabindex || null"
    :validate-event="attrs.validateEvent || true"
    :placeholder="attrs.placeholder || placeholder"
    @blur="blur"
    @focus="focus"
    @change="change"
    @input="input"
    @clear="clear"
  >
    <template v-if="attrs.append" slot="append">{{ attrs.append }}</template>
    <template v-if="attrs.prepend" slot="prepend">{{ attrs.prepend }}</template>
  </el-input>
</template>

<script>
export default {
  name: 'MsuiInput',
  props: {
    attrs: {
      type: Object,
      default: () => {
        return {}
      }
    },
    value: {
      default: ''
    }
  },
  data() {
    return {
      placeholder: '请输入内容'
    }
  },
  computed: {
    val: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    blur() {
      this.$emit('blur')
      if (this.attrs.blur) {
        this.attrs.blur()
      }
    },
    focus() {
      this.$emit('focus')
      if (this.attrs.focus) {
        this.attrs.focus()
      }
    },
    change() {
      this.$emit('change')
      if (this.attrs.change) {
        this.attrs.change()
      }
    },
    input(val) {
      this.$emit('input', val)
      if (this.attrs.input) {
        this.attrs.input(val)
      }
    },
    clear() {
      this.$emit('clear')
      if (this.attrs.clear) {
        this.attrs.clear()
      }
    }
  }
}
</script>
